<template>
    <div>
        <Child>
            <template v-slot:header>
                <br>
                这里是头部区域，<br>我已经插入到头部区域了
                <br>
            </template>
            <template #bottom="scope">
                 <br>
                  这里是底部区域
                  <br>
                  我已经插入到底部区域啦
                  <br>
          </template>
        </Child>

        <!-- 这里的template模板只是作用域插槽的一个语法糖，上面的 v-slot:slot的名字="scope" -->
        <!-- 其实就相当于  slot='xxx'  slot-scope= 'xxx' -->
        <!-- v-slot:xxx = 'xxx'   还可以简写成  #xxx='xxx' -->
    </div>
</template>

<script lang='ts' setup>
import {  } from "vue"
import Child from "./插槽作用域zi.vue"
</script>
 
<style lang = "less" scoped>
    
</style>